بازی آنلاین به زبان jquery

1402
اردیبهشت

بازی آنلاین به زبان jquery

در ادامه یک کد نمونه برای بازی آنلاین ساده با استفاده از jQuery آورده شده است. این بازی "حدس عدد" است که کاربر باید عددی را که کامپیوتر تولید می‌کند، حدس بزند.

html:

<!DOCTYPE html>
<html>
<head>
    <title>بازی حدس عدد</title>
    <style>
        #result {
            font-weight: bold;
        }

        #attempts {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>بازی حدس عدد</h1>
    <p>من یک عدد بین 1 تا 100 تولید کرده‌ام. سعی کنید آن را حدس بزنید.</p>
    <input type="number" id="guess" placeholder="حدس خود را وارد کنید">
    <button id="checkBtn">بررسی</button>
    <p id="result"></p>
    <p id="attempts"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

$(document).ready(function() {
   var randomNumber = Math.floor(Math.random() * 100) + 1; // تولید یک عدد تصادفی بین 1 تا 100
   var attempts = 0;
   $('#checkBtn').click(function() {
       var guess = parseInt($('#guess').val());
       if (guess === randomNumber) {
           $('#result').text('تبریک! حدس شما درست بود.');
           $(this).attr('disabled', 'disabled'); // غیرفعال کردن دکمه بررسی بعد از برد کاربر
       } else if (guess < randomNumber) {
           $('#result').text('عدد بزرگتری را حدس بزنید.');
       } else {
           $('#result').text('عدد کوچکتری را حدس بزنید.');
       }
       attempts++;
       $('#attempts').text('تعداد تلاش‌ها: ' + attempts);
   });
});

در این کد، ابتدا یک عدد تصادفی بین 1 تا 100 تولید می‌شود و کاربر باید با وارد کردن حدس خود، بررسی کند که آیا حدسش درست است یا خیر. سپس با توجه به حدس کاربر، پیام مناسبی نمایش داده می‌شود.

لطفاً توجه داشته باشید که برای اجرای این کد، باید کتابخانه jQuery را به منبع خود اضافه کنید، که این کد از نسخه 3.6.0 آن استفاده می‌کند.

با اجرای این کد، شما یک بازی ساده حدس عدد را با استفاده از jQuery خواهید داشت.

در این نسخه از بازی حدس عدد، ما قابلیت‌های زیر را اضافه کرده‌ایم:

1. نمایش تعداد تلاش‌ها: با هر بار کلیک بر روی دکمه بررسی، تعداد تلاش‌های کاربر نیز ثبت می‌شود و در پاراگراف مربوطه نمایش داده می‌شود.
2. غیرفعال کردن دکمه بررسی بعد از برد کاربر: هنگامی که کاربر عدد را به درستی حدس بزند، دکمه بررسی غیرفع

ال می‌شود و قادر به بررسی بیشتر نخواهد بود.

با اضافه کردن این قابلیت‌ها، تجربه بازی حدس عدد برای کاربر جذابتر و کاملتر خواهد بود. البته می‌توانید به بازی قابلیت‌های دیگری نیز اضافه کنید، مثلاً نمایش پیامی برای تعداد تلاش‌های بیش از حد مجاز یا امکان شروع مجدد بازی پس از پایان بازی فعلی. به شما وابسته است که قابلیت‌ها و قوانین بازی را به دلخواه تغییر دهید.

دانلود بازی

لینک بازی